<template>
    <section>
      <el-col :span="6">
        <div class="section-content clearfix">
          <el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin:0;">
            <el-form :inline="true">
              <el-form-item>
                <el-button  :type="buttonColor" plain  @click="handleAdd">添加分组</el-button>
              </el-form-item>
                <el-form-item style="padding-left:20px;">
                <el-button  :type="buttonColor" plain  @click="rendbool=!rendbool">编辑分组</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <div style="clear: both;"></div>
          <div :style="{width:'100%',backgroundColor: titleColor,padding:'10px 5px 5px',color:'#fff'}">设备分组</div>
          <el-tree
            @node-click="getlists"
            :data="query"
            :props="defaultProps"
            node-key="id"
            :default-expanded-keys="[openGroup]"
            :expand-on-click-node="false"
            :render-content="renderContent"
          ></el-tree>
        </div>
      </el-col>
  
      <el-col :span="18">
        <div class="section-content clearfix">
          <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form>
              <el-form-item style="text-align: right">
                <span style="float:left;font-weight:bold;">{{textname}}</span>
                <el-button :type="buttonColor" v-on:click="addshow()">添加设备</el-button>
              </el-form-item>
            </el-form>
            <!-- 列表 -->
            <el-table
              :data="deviceQuery"
              highlight-current-row
              v-loading="listLoading"
              @selection-change="selsChange"
              :header-row-style="{backgroundColor: titleColor}"
              style="width: 100%;"
            >
             <el-table-column align="center" type="selection" width="30"></el-table-column>
              <el-table-column label="序号"  align="center" type="index" width="50" :index="indexMethod"></el-table-column>
              <el-table-column label="设备名称"  align="center">
                <template scope="scope">
                  <span class="pb-name" @click="details(scope.$index, scope.row)">
                    <i class="pb-icon icon-map"></i>
                    {{scope.row.name}}
                  </span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="deviceSn" label="网关SN" ></el-table-column>
              <el-table-column align="center" prop="deviceTypeName" label="设备类型" >
                <template scope="scope">{{scope.row.deviceTypeName}}</template>
              </el-table-column>
              <!-- <el-table-column prop="barCode" label="整机条码"></el-table-column> -->
  
              <!-- <el-table-column prop="addr" label="采集频率">
              </el-table-column>-->
  
              <!-- <el-table-column align="center" prop="companyName" label="所属组织"></el-table-column> -->
              <!-- <el-table-column align="center" prop="deviceUserName" label="所属用户"></el-table-column> -->
              <!-- <el-table-column align="center" prop="terminalUserName" label="终端用户" width='200'></el-table-column>            -->
              <!-- <el-table-column align="center" label="告警通知">
                <template scope="scope">
                  <el-switch v-model="scope.row.alarmStatus" :active-value="1" :inactive-value="0"  @change="alertSwitch(scope.$index, scope.row)"></el-switch>
                </template>
              </el-table-column> -->
              <!-- <el-table-column align="center" prop="updateTime" label="修改时间" width="160"></el-table-column> -->
  
              <el-table-column align="center" label="操作">
                <template scope="scope">
                  <i
                    @click="handleDel(scope.$index, scope.row)"
                    icon="el-icon-delete"
                    circle
                    title="删除"
                    class="pb-icon icon-delete"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
           <el-col :span="24" class="toolbar">
            
          <!-- <el-button type="danger"  @click="alarmVisible=true"  :disabled="this.sels.length===0" >批量修改告警开关</el-button> -->
             <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total"
                  style="float:right;">
              </el-pagination>
          </el-col>
        </div>
      </el-col>
      <el-dialog
        title="编辑"
        v-show="editFormVisible"
        v-model="editFormVisible"
        :custom-class="dialogTitleColor"
        @close="editFormVisible=false"
      >
        <div slot="footer" style="text-align: left; ">
          <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
            <el-form-item label="分组名称" prop="name">
              <el-input v-model="editForm.name" auto-complete="off"></el-input>
            </el-form-item>
  
            <el-form-item label="所属分组">
              <el-select v-model="editForm.parentId" placeholder="请选择">
                <el-option
                  v-for="item in querys"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  v-if="editshow!=item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="排序值">
              <el-input v-model="editForm.priority" type="number"></el-input>
            </el-form-item>
  
            <el-form-item label="分组描述">
              <el-input type="textarea" v-model="editForm.remark"></el-input>
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align:right;">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button :type="buttonColor" @click.native="editSubmit" :loading="editLoading">提交</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 绑定设备 -->
      <el-dialog
        title="设备绑定"
        v-show="deviceVisible"
        v-model="deviceVisible"
        :custom-class="dialogTitleColor"
        @close="deviceVisible=false"
      >
        <div slot="footer" style="text-align: left; ">
          <div class="section-content pb-top clearfix">
            <el-col :span="24" class="toolbar">
              <el-form :inline="true" :model="filters" @submit.native.prevent>
                <div>
                  <el-form-item>
                    <el-input
                      v-model="filters.name"
                      placeholder="设备名称"
                      @keyup.enter.native="getUsers2()"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      v-model="filters.deviceSn"
                      placeholder="网关SN"
                      @keyup.enter.native="getUsers2()"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-select
                      v-model="filters.deviceTypeId"
                      filterable
                      placeholder="设备类型"
                      @change="getUsers2()"
                    >
                      <el-option label="全选" value=" "></el-option>
                      <el-option
                        v-for="item in typelist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
  
                  <!-- <el-form-item>
                    <el-select
                      v-if="usertype==2"
                      v-model="scade1s"
                      filterable
                      placeholder="请选择厂商"
                      size="mini"
                      @change="scade1get()"
                    >
                      <el-option label="全选" value=" "></el-option>
                      <el-option
                        v-for="item in firmlist"
                        :key="item.companyId"
                        :label="item.companyName"
                        :value="item.companyId"
                      ></el-option>
                    </el-select>
                  </el-form-item> -->
                  <!-- <el-form-item>
                    <el-select
                      v-model="scades"
                      filterable
                      placeholder="请选择子用户"
                      size="mini"
                      @change="getUsers2()"
                    >
                      <el-option :key="userID" label="全选" value=" "></el-option>
                      <el-option
                        v-for="item in userclist"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item> -->
                  <!-- <el-form-item>
                    <el-select
                      v-model="filters.terminalUser"
                      placeholder="终端用户"
                      @change="getUsers2()"
                    >
                      <el-option key=" " label="全选" value=" "></el-option>
                      <el-option v-for="item in terminal_list" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                  </el-form-item> -->
                  <el-form-item>
                    <el-button :type="buttonColor" v-on:click="getUsers2">查询</el-button>
                  </el-form-item>
                </div>
                <el-form-item label="分组设备">
                  <el-transfer
                    class="device-transfer"
                    :titles="['可选', '已选']"
                    :button-texts="['到左边', '到右边']"
                    v-model="binddata"
                    :data="datalist"
                    filterable
                    :filter-method="filterMethod"
                    @change="handleChange"
                    style="padding-left:30px;padding-bottom:20px;"
                  ></el-transfer>
                </el-form-item>
              </el-form>
            </el-col>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align:right;">
            <el-button @click.native="deviceVisible = false">取消</el-button>
            <el-button :type="buttonColor" @click.native="deviceSb" :loading="editLoading">提交</el-button>
          </div>
        </div>
      </el-dialog>
      <!--新增界面-->
      <el-dialog
        title="新增"
        v-show="addFormVisible"
        v-model="addFormVisible"
        :custom-class="dialogTitleColor"
        @close="addFormVisible=false"
      >
        <div slot="footer" style="text-align: left; ">
          <el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
            <el-form-item label="分组名称" prop="name">
              <el-input v-model="addForm.name" auto-complete="off"></el-input>
            </el-form-item>
  
            <el-form-item label="所属分组">
              <el-select v-model="addForm.parentId" placeholder="请选择">
                <el-option v-for="item in querys" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="排序值">
              <el-input v-model="addForm.priority" type="number"></el-input>
            </el-form-item>
  
            <el-form-item label="分组描述">
              <el-input type="textarea" v-model="addForm.remark"></el-input>
            </el-form-item> -->
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align: right;">
            <el-button @click.native="addFormVisible = false">取消</el-button>
            <el-button :type="buttonColor" @click.native="addSubmit" :loading="addLoading">提交</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 编辑界面 -->
      <el-dialog  title="编辑"  v-show="alarmVisible" v-model="alarmVisible" :custom-class="dialogTitleColor" @close="alarmVisible=false" >
        <div slot="footer" style="text-align: left; ">
          <el-form  @submit.native.prevent  :model="editForm" label-width="120px" :rules="editFormRules"  ref="editForm">
            <el-form-item label="批量告警状态">
              <el-select v-model="alarmbool" placeholder="批量告警状态">
                <el-option  label="关" value="0"></el-option>
                <el-option  label="开" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" style="text-align:center;">
            <el-button @click.native="alarmVisible = false">取消</el-button>
            <el-button :type="buttonColor" @click.native="alarmSubmit" :loading="editLoading">提交</el-button>
          </div>
        </div>
      </el-dialog>
    </section>
  </template>
  <script>
  // import util from './../common/js/util'
  //import NProgress from 'nprogress'
  import {
    device_query,
    device_group_query,
    device_group_post,
    device_group_put,
    device_group_delete,
    device_company_group_query,
    device_company_group_add,
    device_company_group_delete,
    user_query,
    device_device_alarm,
    device_device_alarm_list,
    device_company_group_query_slave,
    device_type_query,
  } from "../../api/api";
  
  export default {
    data() {
      return {
        userclist: "",
        deviceQuery: "", //分组设备列表
        terminal_list: "",
        typelist: "",
        alarmbool:'0',
        defaultProps: {
          children: "childrens",
          label: "name"
        },
        filters: {
          name: "",
          deviceSn: "",
          deviceTypeId: ""
        },
        scade1s: "",
        scades: "",
        query: [],
        querys: [{ id: 0, name: "默认" }],
        total: 0,
        page: 1,
        listLoading: false,
        sels: [], //列表选中列
        deviceVisible: false, //设备绑定界面显示
        editFormVisible: false, //编辑界面是否显示
        editLoading: false,
        alarmVisible:false,
        editFormRules: {
          name: [
            {
              required: true,
              message: "请输入分组名称",
              trigger: "blur"
            },
            { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
          ]
        },
        editshow: "",
        //编辑界面数据
        editForm: {
          id: "",
          name: "",
          parentId: "",
          priority: "",
          remark: ""
        },
  
        addFormVisible: false, //新增界面是否显示
        addLoading: false,
        addFormRules: {
          name: [
            {
              required: true,
              message: "请输入分组名称",
              trigger: "blur"
            },
            { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
          ],
          path: [
            {
              required: true,
              message: "请输入path",
              trigger: "blur"
            }
          ]
        },
        openGroup:"",
        //新增界面数据
        addForm: {
          name: "",
          parentId: "",
          priority: "",
          remark: ""
        },
        datalist: [], //数据源
        binddata: [], //绑定的数据,
        deviceGroupId: "", //选择的分组ID,
        rendbool:false,
        textname:'',//当前点击的组名
         pageNo: 1,
            pageSize: 10,
      };
    },
    computed:{
      titleColor(){
				return this.$store.state.titleColor
			},
      buttonColor(){
				return this.$store.state.buttonColor
			},
      dialogTitleColor(){
				return this.$store.state.dialogTitleColor
			},
    },
    methods: {
      //分组自定义查询
      filterMethod(query, item){
        // console.log(item)
        return item.label.indexOf(query) > -1;
      },
      handleChange(value, direction, movedKeys){
        // console.log(value)
        // console.log(direction)
        // console.log(movedKeys)
        // console.log('选中+',this.binddata);
        if(direction == 'left'){
          console.log(this.deviceGroupId)
          for(let i in movedKeys){
            let para = {
              deviceId: movedKeys[i],
              deviceGroupId: this.deviceGroupId
            };
            device_company_group_delete(para).then(res => {
              if (res.code == 0) {
                // this.$message({
                //   message: "移除成功",
                //   type: "success"
                // });
                this.getlist(this.deviceGroupId);
              }
            });
          }
          
        }
      },
      indexMethod(index) {
                  let num = (this.page - 1) * 10 + index + 1;
                  return num;
              },
      renderContent(h, { node, data, store }) {
        if(this.rendbool){
  return (
          <span style="width:100%;">
            <span>
              <span>{node.label}</span>
            </span>
            <span v-if="{rendbool}" style="float: right; margin-right: 20px">
              <i
                class="el-icon-circle-plus-outline"
                on-click={($event) => this.handleAdd(store, data,$event)}
                title="添加"
              ></i>
              <i
                class="el-icon-edit"
                title="编辑"
                on-click={($event) => this.handleEdit(store, data,$event)}
              ></i>
              <i
                class="el-icon-delete"
                on-click={($event) => this.batchRemove(store, data,$event)}
                title="删除"
              ></i>
            </span>
          </span>
        );
        }else{
          return (
          <span style="width:100%;">
            <span>
              <span>{node.label}</span>
            </span>
    
          </span>
        );
        }
        
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getlist();
      },
      addshow() {
        if (!this.deviceGroupId) {
          this.$message({
            message: "请选择分组",
            type: "error"
          });
        } else {
          this.deviceVisible = true;
          this.getUsers2()
        }
      },
      //获取设备列表
      deviceSb() {
        console.log(this.binddata);
        console.log(this.deviceGroupId);
        let num = "";
        for (let i in this.binddata) {
          if (i == this.binddata.length - 1) {
            num = num + this.binddata[i];
          } else {
            num = num + this.binddata[i] + ",";
          }
        }
        let para = {
          deviceGroupId: this.deviceGroupId,
          ids: num
        };
        //NProgress.start();
        device_company_group_add(para).then(res => {
          this.begCode(res.code, res.message);
          this.$message({
            message: "绑定成功",
            type: "success"
          });
          this.getlist(this.deviceGroupId);
          this.deviceVisible = false;
          //NProgress.done();
        });
      },
      getlists(s, d, t){
        this.textname=s.name;
        sessionStorage.setItem('showlistId',s.parentId)
        sessionStorage.setItem('groupList',JSON.stringify(s))
        console.log(s);
        console.log(d);
        console.log(t);
        this.deviceGroupId = s.id;
        this.getlist();
      },
      getlist(s, d, t) {
  
        let para = {
          deviceGroupId: this.deviceGroupId,
          deviceTemplateId: this.deviceTemplateId,
          pageNo: this.page,
          pageSize: this.pageSize,
        };
        this.listLoading = true;
        //NProgress.start();
        device_company_group_query(para).then(res => {
          this.begCode(res.code, res.message);
          this.deviceQuery = res.data.list;
            this.page = res.data.pageNo;
            
          this.total = res.data.totalCount;
          this.binddata = [];
          for (let i in this.deviceQuery) {
            this.binddata.push(this.deviceQuery[i].deviceId);
          }
          this.listLoading = false;
          //NProgress.done();
        });
      },
      getUsers2() {
        let para = {
          pageNo: 1,
          pageSize: 1000,
          name: this.filters.name,
          deviceTypeId: this.filters.deviceTypeId,
          deviceSn: this.filters.deviceSn,
          deviceModelId: this.filters.deviceModelId,
          terminalUser: this.filters.terminalUser,
          guild: this.filters.guild,
          area: this.filters.area1,
          address: this.filters.address,
          orderSn: this.filters.orderSn,
          companyId: this.scade1s,
          deviceUserId: this.scades
        };
        // localStorage.setItem("maplist", JSON.stringify(para));
        this.editLoading = true;
        this.datalist = [];
        //NProgress.start();
        device_query(para).then(res => {
          this.begCode(res.code, res.message);       
          for (let i in res.data.list) {
            this.datalist.push({
              key: res.data.list[i].deviceId,
              label: res.data.list[i].name
            });
          }
  
          this.editLoading = false;
          console.log(this.users);
          //NProgress.done();
        });
      },
      getUsers() {
        let para = {
          pageNo: this.page,
          pageSize: 1000,
          name: this.filters.name
        };
        this.listLoading = true;
        //NProgress.start();
        device_group_query(para).then(res => { 
          this.begCode(res.code);
          // this.total = res.data.totalCount;
          if(sessionStorage.getItem('showlistId')){
            this.openGroup = sessionStorage.getItem('showlistId')
          }
          this.query = res.data;
          this.querys = [{ id: 0, name: "默认" }];
          this.getrecursion(res.data);
          this.listLoading = false;     
          //NProgress.done();
        });
      },
      getrecursion(data) {
        for (var i in data) {
          this.querys.push(data[i]);
          OUT:
          if (!data[i].childrens) {
            break OUT;
          } else {
            this.getrecursion(data[i].childrens);
          }
        }
        console.log(this.querys)
      },
      //删除
      handleDel: function(index, row) {
        this.$confirm("确认移除吗?", "提示", {
          type: "warning"
        })
          .then(() => {
            this.listLoading = true;
            //NProgress.start();
            let para = {
              deviceId:row.deviceId,
              deviceGroupId:this.deviceGroupId
            };
            device_company_group_delete(para).then(res => {
              this.begCode(res.code);
              if (res.code == 0) {
                this.listLoading = false;
                //NProgress.done();
                this.$message({
                  message: "移除成功",
                  type: "success"
                });
                this.getlist(this.deviceGroupId);
              }
            });
          })
          .catch(() => {});
      },
      //显示编辑界面
      handleEdit: function(index, row,event) {
        event.stopPropagation()
        this.editFormVisible = true;
        this.editshow = row.id;
        this.editForm = Object.assign({}, row);
        this.filters.name = ''
        this.openGroup = row.id
        console.log(this.openGroup)
      },
      //显示新增界面
      handleAdd: function(store, data,event) {
        // console.log(event);
        console.log(store);
        console.log(data);
        if(event){
          event.stopPropagation()
        }
        this.addFormVisible = true;
        this.addForm = {
          name: "",
          parentId: data.id,
          priority: "",
          remark: ""
        };
        this.openGroup = data.id
        console.log(this.openGroup)
      },
      //编辑
      editSubmit: function() {
        this.$refs.editForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.editLoading = true;
              //NProgress.start();
              let para = Object.assign({}, this.editForm);
  
              device_group_put(para).then(res => {
                this.begCode(res.code);
  
                if (res.code == 0) {
                  this.editLoading = false;
                  //NProgress.done();
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.$refs["editForm"].resetFields();
                  this.editFormVisible = false;
                  this.getUsers();
                }
              });
            });
          }
        });
      },
      //新增
      addSubmit: function() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.addLoading = true;
              //NProgress.start();
              let para = Object.assign({}, this.addForm);
  
              device_group_post(para).then(res => {
                this.begCode(res.code);
                if(res.code == 0){
                  this.addLoading = false;
                  //NProgress.done();
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.$refs["addForm"].resetFields();
                  this.addFormVisible = false;
                  this.getUsers();
                }else{
                   this.addLoading = false;
                    //NProgress.done();
                    this.$message({
                      message: res.message,
                      type: "warning"
                    });
                    this.$refs["addForm"].resetFields();
                    this.addFormVisible = false;
                    this.getUsers();
                }
              });
            });
          }
        });
      },
      selsChange: function(sels) {
        console.log(sels)
        this.sels = sels;
      },
      //删除
      batchRemove: function(s,d,event) {
        event.stopPropagation()
        this.openGroup = d.parentId
        var ids = this.sels.map(item => item.id).toString();
        this.$confirm("确认删除选中分组吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            this.listLoading = true;
            //NProgress.start();
            let para = {
              idList: [d.id]
            };
            device_group_delete(para).then(res => {
              this.begCode(res.code);
              this.listLoading = false;
              //NProgress.done();
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getUsers();
            });
          })
          .catch(() => {});
      },
      details: function(index, row) {
        sessionStorage.setItem("facility_details", row.deviceId);
        this.$router.push({
          path: "/devices/deviceDatail"
        });
      },
      //告警开关
      alertSwitch(index,row){
        console.log(row.alarmStatus);
           let para = {
              alarmStatus: row.alarmStatus,
              deviceId: row.deviceId
            };
            device_device_alarm(para).then(res => {
              this.begCode(res.code, res.message);
              this.listLoading = false;
              //NProgress.done();
              this.$message({ 
                message: "修改成功",
                type: "success"
              });
            });
      },
      alarmSubmit(){
        var ids = this.sels.map(item => item.deviceId).toString();
        this.dellist = ids.split(",");
        this.$confirm("确认提交吗?", "提示", {
          type: "warning"
        }).then(() => {
            // this.listLoading = true;
            //NProgress.start();
            let para = {
              idList: this.dellist,
              value: this.alarmbool
            };
            console.log(para)
            device_device_alarm_list(para).then(res => {
              this.begCode(res.code, res.message);
              //NProgress.done();
              if (res.code == 0) {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                this.getlist();
                this.alarmVisible = false;
              }
            });
          })
          .catch(() => {});
      },
    },
    mounted() {
      device_company_group_query_slave().then(res =>{
        console.log(res)
      })
      this.usertype = JSON.parse(sessionStorage.getItem("user")).type;
      this.getUsers();
      this.getUsers2();
      if(sessionStorage.getItem('groupList')){
        let deitleId = JSON.parse(sessionStorage.getItem('groupList'))
        console.log(deitleId)
        this.getlists(deitleId)
      }
      let para = {
        name: "industry",
        pageSize: 999,
        pageNo: 1
      };
  
      let parauser = {
        pageNo: 1,
        pageSize: 9999,
        type: 1
      };
      user_query(para).then(res => {
        this.begCode(res.code, res.message);
        this.userclist = res.data.list;
        // if (this.userclist[0]) {
  
        //     this.scade = this.userclist[0].userId;
        // }
        this.scade = this.userID;
        // this.select_scade();
  
        // this.scade1get();
      });
      user_query(parauser).then(res => {
        this.begCode(res.code, res.message);
        this.firmlist = res.data.list;
      });
  
      // this.getUsers1();
      this.t = setInterval(() => {
        // this.getUsers1();
      }, 10000);
      device_type_query(para).then(res => {
        this.begCode(res.code, res.message);
        this.typelist = res.data.list;
        //NProgress.done();
      });
  
      let para3 = {
        pageNo: 1,
        pageSize: 9999
      };
    }
  };
  </script>
  
  <style>
  .el-tree{
    /* height: 500px; */
    height: 915px;
    overflow: scroll;
  }
  .el-tree-node__content {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 3px;
    padding-top: 3px;
    cursor: inherit;
  }
  .el-tree-node__content i {
    cursor: pointer;
    margin-right: 10px;
  }
  .el-tree-node__expand-icon{
            position :absolute;
            right: 2%;
        }
  .group-title{
    display: flex;
    justify-content: space-between;
  }   
  .device-transfer>.el-transfer-panel>.el-transfer-panel__body>.el-input--prefix input{
    height: inherit;
  }
  </style>